<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>一二三</title>
</head>
<body>
	<canvas id="the_stage" width="600" height="400" style="border:1px solid #999;">not support</canvas>
	<script type="text/javascript">
	function Draw(arg) {
		if(arg.nodeType){
			this.canvas = arg;
		}else if(typeof arg == 'string'){
			this.canvas = document.getElementById(arg);
		}else{
			return;
		}
		this.init();
	}
	Draw.prototype = {
		init:function(){
			var that = this;
			if(!this.canvas.getContext){
				return;
			}
			this.context = this.canvas.getContext('2d');
			this.canvas.onselectstart = function(){
				return false;
			};
			this.canvas.onmousedown = function(event){
				that.drawBegin(event);
			};
		},
		drawBegin:function(e){
			var that = this,
			stage_info = this.canvas.getBoundingClientRect();
			window.getSelection ? window.getSelection().removeAllRanges() :
				document.selection.empty();
			this.context.moveTo(
				e.clientX - stage_info.left,
				e.clientY - stage_info.top
			);
			document.onmousemove = function(event){
				that.drawing(event);
			};
			document.onmouseup = this.drawEnd;
		},
		drawing:function(e){
			var stage_info = this.canvas.getBoundingClientRect();
			this.context.lineTo(
				e.clientX - stage_info.left,
				e.clientY - stage_info.top
			);
			this.context.stroke();
		},
		drawEnd:function(){
			document.onmousemove = document.onmouseup = null;
		}
	};
	var draw = new Draw('the_stage');

	</script>
	</body>
</html>
